<template>
  <div class="login-container-full">
    <vue-particles
            class="wallPaper"
            color="#dedede"
            :particleOpacity="0.7"
            :particlesNumber="80"
            shapeType="circle"
            :particleSize="4"
            linesColor="#dedede"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="3"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
    >
    </vue-particles>
    <el-form :model="admin"
             :rules="adminRules"
             ref="ruleForm2"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-container">
      <h3 class="title">快捷商城后台系统</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="admin.account" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="admin.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="checkAccount" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
          logining: false,
          admin: {
              account: 'admin',
              password: 'admin'
          },
          adminRules: {
              account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
              checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
          },
        checked: false
      };
    },
    methods: {
      checkAccount() {
          if(this.admin.account === 'admin' && this.admin.password === 'admin') {
              setTimeout(()=>{
                  this.logining = false;
                  this.$router.push('/addProd');
              }, 800)
          }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .login-container-full{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("http://pkzr1rkd3.bkt.clouddn.com/timg%20%285%29.jpg");
    background-size: cover;
  }
  .wallPaper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0 auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0 0 35px 0;
    }
  }
</style>
